<template>
  <div>
    <a-button type="primary" size="large" class="editable-add-btn" @click="handleAdd" style="margin-bottom: 8px">添加轮播图
    </a-button>
    <a-table bordered :data-source="dataSource" :columns="columns">
      <template #img="{ text }">
        <img :src="text" width=200>
      </template>
      <template #status="{ text: status }">
        <span>
          <a-tag :color="status === 1 ? 'processing' : status === 2 ? 'success' : 'error'">
            {{ status === 1 ? '进行中' : status === 2 ? '已完成' : '异常' }}
          </a-tag>
        </span>
      </template>
      <template #operation="{ record }">
        <a-space>
          <a @click="onEdit(record)">编辑</a>
          <a-popconfirm v-if="dataSource.length" title="确定要删掉吗?" ok-text="是" cancel-text="否"
            @confirm="onDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <SwiperModal ref="swiperModalRef" :dataSource="dataSource" />
  </div>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from "ant-design-vue";

import { getSwiperList, deleteSwiper } from '../../service/api/swiper';
import SwiperModal from "./SwiperModal.vue";

let dataSource = ref([]);

const columns = [
  {
    title: '产品 id',
    dataIndex: 'id',
    width: '10%',
  },
  {
    title: '名称',
    dataIndex: 'title',
    width: '20%',
  },
  {
    title: '图片',
    dataIndex: 'img',
    width: '200',
    slots: {
      customRender: 'img',
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: '10%',
    slots: {
      customRender: 'status',
    },
  },
  {
    title: '店铺 id',
    dataIndex: 'shop_id',
    width: '10%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: {
      customRender: 'operation',
    },
  },
];

const useHttpRequestEffect = () => {
  const getSwiperDataRequest = async () => {
    const res = await getSwiperList();
    dataSource.value = res?.data
  }
  const deleteSwiperRequest = async (data) => {
    const res = await deleteSwiper(data);
    if (res?.data?.res) {
      message.success("删除成功")
    } else {
      message.error("删除失败")
    }
  }
  return { getSwiperDataRequest, deleteSwiperRequest }
}

const useModalEffect = () => {
  const { deleteSwiperRequest } = useHttpRequestEffect();
  const swiperModalRef = ref();
  const onEdit = item => {
    swiperModalRef.value.showEditModal(item);
  }

  const handleAdd = () => {
    swiperModalRef.value.showAddModal();
  }

  const onDelete = id => {
    dataSource.value = dataSource.value.filter(item => item.id !== id);
    deleteSwiperRequest(id);
  }
  return { swiperModalRef, onEdit, handleAdd, onDelete };
}

export default defineComponent({
  components: {
    PlusOutlined,
    SwiperModal,
  },

  setup() {
    const { getSwiperDataRequest } = useHttpRequestEffect();
    const { swiperModalRef, onEdit, handleAdd, onDelete } = useModalEffect();

    onMounted(async () => {
      await getSwiperDataRequest();
    });

    return {
      columns, dataSource, swiperModalRef,
      onEdit, handleAdd, onDelete
    };
  },
});
</script>

<style>
.avatar-uploader {
  padding-left: 20px;
}
</style>